<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>

<body>
<table>
	<tr>
		<td>
		<div style="height: 271px; width: 473px"><img id="imgcount"
			src="images/homemain1.png" border="1" height="265px" width="467px"
			style="margin-left: auto; margin-right: auto; vertical-align: bottom; border-color: #9A9994; border-width: 3px;" /></div>
		</td>
		<td>
		<div id="main"
			style="overflow: hidden; width: 247px; position: relative; height: 271px;">
		<%!int i=0; %>
		<c:forEach items="${model.photo }" var="p">
		<%i=i+1; %>
		<div id="f<%=i %>"
			style="z-index: 10; left: 0px; width: 247px; position: absolute; top: 0px; height: 68px;">
		<table>
			<tr>
				<td style="border: none; width: 90px"><img id="i<%=i %>"
					style="margin-left: auto; margin-right: auto; vertical-align: bottom; border: none; width:120px; height:80px"
					src="preview_${p.id }.jpg" /></td>
				<td style="border: none; width: 157px; text-align: left">
				<table style="margin-left: auto; margin-right: auto">
					<tr>
						<td style="text-align: left; font-size: 9px">Atrist:${p.name }</td>
					</tr>
					<tr>
						<td style="text-align: left; font-size: 9px">Description:</td>
					</tr>
					<tr>
						<td style="text-align: left; font-size: 9px">${p.description}</td>
					</tr>
				</table>
				</td>
			</tr>
		</table>
		</div>
		</c:forEach>
		</div>
		</td>
	</tr>
</table>
<script language="javascript" type="text/javascript">
var curFrame=1; 
var frameheight = 68; 
var speed = 5; 
var waitTime = 4000; 
var numbercount=${model.pageresultcount };
var shownumber=4;
var leftmargin=0;
var previewwidth=247;
var scrollItv;
var autoItv;
var maindiv = document.getElementById("main");
autoItv = setInterval(autoSlide, waitTime);
autoinit = setTimeout(init,0);
function init(){
	var i=0;
	var hm=document.getElementById("main").innerHTML;
	//alert(hm);
	if(hm.indexOf("</DIV")>0)
	{
		var v=document.getElementById("main").innerHTML.split("</DIV>");
		for(i=1;i<=shownumber;i++)
		{
			v[i-1]=v[i-1].replace("id=\"f"+i+"\"","id=\"f"+(numbercount+i)+"\"");
			v[i-1]=v[i-1].replace("id=f"+i+"","id=f"+(numbercount+i)+"");
			v[i-1]+="</DIV>";
			document.getElementById("main").innerHTML+=v[i-1]+"</DIV>";
		}
	}
	else
	{
		var v=document.getElementById("main").innerHTML.split("</div>");
		for(i=1;i<=shownumber;i++)
		{
			v[i-1]=v[i-1].replace("id=\"f"+i+"\"","id=\"f"+(numbercount+i)+"\"");
			v[i-1]=v[i-1].replace("id=f"+i+"","id=f"+(numbercount+i)+"");
			v[i-1]+="</div>";
			document.getElementById("main").innerHTML+=v[i-1]+"</div>";
		}
	}
	for(i=1;i<=numbercount+shownumber;i++)
	{
		var tempid="f"+i+"";
		document.getElementById(tempid).style.top=frameheight*(i-1)+"px";
		document.getElementById(tempid).style.left=leftmargin+"px";
		document.getElementById(tempid).style.width=previewwidth+"px";
		document.getElementById(tempid).style.height=frameheight+"px";
		document.getElementById(tempid).style.zIndex="10";
		document.getElementById(tempid).style.position="absolute";
	}
	document.getElementById("imgcount").src=document.getElementById("i1").src.replace("preview","photo");
}
function slideTo(id){
	curFrame = id;
	var curTop = maindiv.scrollTop;
	var tarTop = frameheight*(id-1);
	var step = curTop>tarTop?-curTop:speed;
	clearInterval(autoItv);
	clearInterval(scrollItv);
	scrollItv = setInterval(function(){
		maindiv.scrollTop += step;
		if(Math.abs(maindiv.scrollTop-tarTop)<speed){
			if(id>numbercount)
			{
				clearInterval(autoItv);
				clearInterval(scrollItv);
				maindiv.scrollTop = tarTop;
				slideTo(1);
				autoItv = setInterval(autoSlide, waitTime);
			}
			else
			{
				clearInterval(autoItv);
				clearInterval(scrollItv);
				maindiv.scrollTop = tarTop;
				autoItv = setInterval(autoSlide, waitTime);
			}
		}
	},20);
	document.getElementById("imgcount").src=document.getElementById("i"+id+"").src.replace("preview","photo");
}
function autoSlide(){
	if(curFrame<=numbercount){curFrame++;}else{curFrame=1;}
	slideTo(curFrame);
}
</script>

</body>
</html>
